import { mapState, mapActions } from 'vuex';
<template>
  <div>
    <van-tabbar v-model="activeIndex">
      <van-tabbar-item v-for="(item,index) in tabbarList"
                       :key="index"
                       @click="turn(item.name,index)">
        <img :src="activeIndex==index?item.active:item.normal">
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
  methods: {
    ...mapActions(["indexActions"]),
    turn (name, index) {
      this.indexActions(index) //触发vuex中的actions 改变导航激活下标
      this.$router.push({ name: name })
    }
  },
  computed: {
    ...mapState(["activeIndex"])
  },
  data () {
    return {
      tabbarList: [
        {
          name: 'Home',
          title: '首页',
          normal:
            'https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/81741/30/12345/4140/5d9c4b13E726f0a1e/82c582e7c375e4b3.png', //普通图标
          active:
            'https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/67550/26/12426/5094/5d9c4b13Eea435a3f/81328b0609c60a3c.png' //激活图标
        },
        {
          name: 'category',
          title: '分类',
          normal:
            'https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/56507/6/12787/3168/5d9c4b12Ef363dd8d/4af32f42575509d8.png',
          active:
            'https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/48787/24/12910/3390/5d9c4b12Ee63270e4/4481f5b3dbad979d.png'
        },
        {
          name: 'suprise',
          title: '惊喜',
          normal:
            'https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/70651/38/12417/3194/5d9d3eafE12cde68b/2467c20113c50451.png',
          active:
            'https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/70651/38/12417/3194/5d9d3eafE12cde68b/2467c20113c50451.png'
        },
        {
          name: 'cart',
          title: '购物车',
          normal:
            'https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/64954/4/12406/3529/5d9c4b12Ee7a82735/f2fe0a88bf344736.png',
          active:
            'https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/45205/32/12889/3890/5d9c4b12E7bc2c425/dd60fafbde8542ca.png'
        },
        {
          name: 'my',
          title: '我的',
          normal:
            'https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/56206/13/12652/2957/5d9c4b13E503bcd76/1c8543653685e80e.png',
          active:
            'https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/47480/36/12929/3209/5d9c4b13E97caa63a/4dc0ec8a7e47c2b7.png'
        }
      ]
    }
  }
}
</script>
<style scoped lang="less">
img {
  width: 100px;
  height: 100px;
}
</style>